document.addEventListener('DOMContentLoaded', function() {
    // 获取表单和输入元素
    const inputs = document.querySelectorAll('input');
    const form = document.querySelector('.register-form');
    const registerBtn = document.querySelector('.register-btn');
    
    // 为输入框添加焦点效果
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.classList.remove('focused');
        });
        
        // 添加输入动画效果
        input.addEventListener('input', function() {
            if (this.value.length > 0) {
                this.classList.add('has-value');
            } else {
                this.classList.remove('has-value');
            }
        });
    });
    
    // 添加按钮点击波纹效果
    registerBtn.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        this.appendChild(ripple);
        
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        
        ripple.style.width = ripple.style.height = `${size}px`;
        ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
        ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
        
        ripple.classList.add('active');
        
        setTimeout(() => {
            ripple.remove();
        }, 600);
    });
    
    // 添加社交图标悬停效果
    const socialIcons = document.querySelectorAll('.social-icon');
    socialIcons.forEach(icon => {
        icon.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-3px) scale(1.1)';
        });
        
        icon.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
    
    // 添加表单提交动画
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 添加提交动画
        registerBtn.classList.add('submitting');
        registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
        
        // 模拟提交过程
        setTimeout(() => {
            registerBtn.classList.remove('submitting');
            registerBtn.innerHTML = '注册';
            
            // 显示成功消息
            const successMsg = document.createElement('div');
            successMsg.className = 'success-message';
            successMsg.innerHTML = '<i class="fas fa-check-circle"></i> 注册成功！';
            
            form.appendChild(successMsg);
            
            setTimeout(() => {
                successMsg.classList.add('show');
            }, 10);
            
            // 5秒后移除成功信息
            setTimeout(() => {
                successMsg.classList.remove('show');
                setTimeout(() => {
                    form.removeChild(successMsg);
                }, 300);
            }, 5000);
        }, 2000);
    });
    
    // 添加页面载入动画效果
    document.body.classList.add('loaded');
    
    // 添加视差滚动效果
    window.addEventListener('mousemove', function(e) {
        const moveX = (e.clientX - window.innerWidth / 2) * 0.01;
        const moveY = (e.clientY - window.innerHeight / 2) * 0.01;
        
        document.querySelector('.left-panel').style.transform = `translateX(${moveX}px) translateY(${moveY}px)`;
        document.querySelector('.right-panel').style.transform = `translateX(${-moveX}px) translateY(${-moveY}px)`;
    });
}); 